<template>
	<view>
		<view class="detailsTrip">
			<view class="details" @click="pageJupm">
				<u--image radius='10px' :showLoading="true" :src="detailsData.thumb" width="80px" height="80px" @click="click"></u--image>
				<view class="detailsTitle">
					<u--text :bold='true' :text="detailsData.title"></u--text>
					<u-icon name="arrow-right" size='12'></u-icon>
				</view>
			</view>
			<view class="detailsDate">
				<u-icon name="calendar" size='30'></u-icon>
				<u--text :text="`游玩日期：${detailsData.date}`"></u--text>
			</view>
			<view class="UseDay">
				<u-icon name="clock" size='25'></u-icon>
				<u--text text="开放时间:全年全天开放"></u--text>
			</view>
		</view>
		<view class="detailMap">
			
			<map 
			    
				:longitude='detailsData.longitude' 
				:latitude='detailsData.latitude' 
				:markers="detailsData.markers"
			>
			<view class="mapTitle">
				<text>{{detailsData.title}}</text>
				<view class="iconMap">
					<u-icon name="map" color='#ffffff' size='25'></u-icon>
				</view>
			</view>
			</map>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailsData:{
					// thumb:'https://www.zhuinw.com/uploads/20210816/ef73469fd86f19ac1fba0b540502c42f.jpg',
					// title:'泰康之家·大清谷',
					// date:'2022年5月20日',
					// price:'7500~15000月',
					// briefTxt:'',
					// longitude:106.593774,
					// latitude:29.418686,
					// markers:[
					// 	{
					// 		latitude:29.418686,
					// 		longitude:106.593774,
					// 		iconPath:'https://www.zhuinw.com/uploads/20210816/ef73469fd86f19ac1fba0b540502c42f.jpg',
					// 		width:30,
					// 	}
					// ]
				},
			}
		},
		onLoad(option) {
			var data = JSON.parse(option.Data); // 字符串转对象
			this.detailsData=data
			console.log(this.detailsData)
		},
		methods: {
			pageJupm(){
				var detailsData=JSON.stringify(this.detailsData)
				uni.navigateTo({
					url:'../goodchoice/goodchoice?Data='+detailsData
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.detailsTrip{
	padding: 0 15px;
	background: #FFFFFF;
	.details{
		padding: 30px 0 15px 0;
		display: flex;
		justify-content: space-between;
		.detailsTitle{
			width: 75%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.detailsDate,.UseDay{
		padding: 15px 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 1px solid #C0C0C0;
		/deep/ .u-icon{
			margin-right: 20rpx;
		}
	}
}
.detailMap{
		map{
			width: 100%; 
			height: 200px;
			position: relative;
			.mapTitle{
				border-radius: 10px;
				position: absolute;
				top: 30%;
				left: 50%;
				transform:translate(-50%);
				background: #FFFFFF;
				padding: 20px;
				width: 80%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text{
					font-weight: 700;
				}
				.iconMap{
					padding: 10px;
					border-radius: 50%;
					background: #FF9800;
				}
			}
		}
	}
</style>
